<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>What's for today?</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
    <!-- 自定义样式 -->
    <style>
        body {
            background-color: #f8f9fa;
            font-family: Arial, sans-serif;
        }
        .navbar {
            background-color: #343a40;
        }
        .navbar-brand {
            color: white;
            font-weight: bold;
        }
        .nav-link {
            color: white;
        }
        .jumbotron {
            background-image: url(img/mainpage.jpg);
            background-size: cover;
            background-position: center;
            padding: 150px 0;
            margin-bottom: 0;
            text-align: center;
        }
        .jumbotron-content {
        background-color: rgba(145, 116, 116, 0.5); /* 半透明背景色 */
        padding: 50px;
        border-radius: 10px;
        color: white;
}
        .jumbotron h1 {
            font-size: 3.5rem;
            margin-bottom: 20px;
        }
        .jumbotron p {
            font-size: 1.5rem;
            margin-bottom: 30px;
        }
        .jumbotron .btn-primary {
            font-size: 1.2rem;
            padding: 10px 30px;
            border-radius: 30px;
        }
        .feature {
            padding: 50px 0;
            text-align: center;
        }
        .feature h2 {
            margin-bottom: 20px;
        }
        .feature p {
            font-size: 1.2rem;
        }
    </style>
</head>
<body>
    <!-- 导航栏 -->
    <nav class="navbar navbar-expand-lg navbar-dark">
        <div class="container-fluid">
            <a class="navbar-brand" href="#">What's for today?</a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav ms-auto">
                    <!-- <li class="nav-item">
                        <a class="nav-link" href="#">Home</a>
                    </li> -->
                    <li class="nav-item">
                        <a class="nav-link" href="login.html">Login</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Signup</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

   
   <!-- Jumbotron -->
<div class="jumbotron">
    <div class="container jumbotron-content">
        <h1>Welcome to What's for today?</h1>
        <p>Discover new dining places, share your experiences, and connect with food enthusiasts!</p>
        <a class="btn btn-primary btn-lg" href="login.html">Login to start</a>
    </div>
</div>


    <!-- Features Section -->
    <div class="container">
        <div class="row">
            <div class="col-md-4 feature">
                <h2>Discover</h2>
                <p>Explore new dining places and find your next favorite spot.</p>
            </div>
            <div class="col-md-4 feature">
                <h2>Review</h2>
                <p>Share your dining experiences with the community by writing reviews and ratings.</p>
            </div>
            <div class="col-md-4 feature">
                <h2>Connect</h2>
                <p>Connect with other food enthusiasts and plan dining adventures together.</p>
            </div>
        </div>
    </div>

    <!-- JavaScript代码 -->
    <script src="main.js"></script>
</body>
</html>
